<template>
  <el-container style="height: 100%;width:90%;">
    <div style="margin:0 auto; ">
      <el-row style="margin:5px 0; " v-for="(item,index) in productList" :key="index">
        <el-col>
          <div style="padding: 14px;float: left;height:300px">
            <div style="margin-top: 20%;font-weight: bold;">{{item.MPN}}</div>
            <el-popover
              placement="bottom"
              width="400"
              trigger="hover">
              <el-row type="flex" justify="center" v-for="(info,index) in item.infoList" :key="index">
                <el-col :span="24">
                  <div class="grid-content bg-purple-light">
                    {{info}}
                  </div>
                </el-col>
              </el-row>
              <el-button round slot="reference"
                         style="margin-top: 50px;margin-left: 30px;background-color: white;color: gray">see more
              </el-button>
            </el-popover>
            <!-- <el-button round style="margin-top: 200px;margin-left: 30px;background-color: white;color: gray">see more</el-button> -->

            <el-divider direction="vertical" class="el-divider-class"></el-divider>
          </div>
          <el-image
            style="width: 500px; height: 400px;float: left;"
            :src="item.imageUrl"
            fit="fill"></el-image>
        </el-col>
      </el-row>

    </div>

  </el-container>
</template>

<script>
export default {
  name: 'index.vue',
  data () {
    return {
      gridData: [],
      productList: [
        {
          'req': 1,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 2,
          'MPN': 'FP2237S',
          'imageUrl': require('@/assets/img/daoqiong/FP2237S.jpg'),
          'infoList': [
            'MPN: FP2237S',
            'Gasket Included: N',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 45',
            'Maximum Pressure Rate (psi): 100',
            'Minimum Free Flow Rate (gph): 35',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Quick Connect, Return Line',
            'Warranty: Two Years Warranty',
            'OEM Part Number(s): XL3Z9H307AA, XL3Z9H307AB, XL3Z9H307BA, XL3Z9H307BB, XL3Z9H307DA, XL3Z9H307DB, XL3Z9H307EA, XL3Z9H307EB'
          ]

        },
        {
          'req': 3,
          'MPN': 'FP7138M',
          'imageUrl': require('@/assets/img/daoqiong/FP7138M.jpg'),
          'infoList': [
            'MPN：FP7138M',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 130',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 110',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Quick Connect, Return Line',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 4,
          'MPN': 'FP7182M',
          'imageUrl': require('@/assets/img/daoqiong/FP7182M.jpg'),
          'infoList': [
            'MPN：FP7182M',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 75',
            'Maximum Pressure Rate (psi): 110',
            'Minimum Free Flow Rate (gph): 65',
            'Minimum Pressure Rate (psi): 95',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Quick Connect',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 5,
          'MPN': 'FP3508M',
          'imageUrl': require('@/assets/img/daoqiong/FP3508M.jpg'),
          'infoList': [
            'MPN：FP3508M',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 65',
            'Maximum Pressure Rate (psi): 100',
            'Minimum Free Flow Rate (gph): 55',
            'Minimum Pressure Rate (psi): 85',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Quick Connect',
            'Warranty: Two Years Warranty',
            'Alternate/OEM Part Number(s): 19121628, 19153713, 25169302'

          ]

        },
        {
          'req': 6,
          'MPN': 'FP3950M',
          'imageUrl': require('@/assets/img/daoqiong/FP3950M.jpg'),
          'infoList': [
            'MPN：FP3950M',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 45',
            'Maximum Pressure Rate (psi): 75',
            'Minimum Free Flow Rate (gph): 35',
            'Minimum Pressure Rate (psi): 65',
            'Outlet Count: 1',
            'Outlet Size: 5/16',
            'Outlet Type: Quick Connect, Return Line',
            'Warranty: Two Years Warranty',
            'Alternate/OEM Part Number(s): 19179627, 25174837, 25317984'

          ]

        },
        {
          'req': 7,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 8,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 9,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 10,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 11,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 12,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 13,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 14,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 15,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        },
        {
          'req': 16,
          'MPN': 'FP3622S',
          'imageUrl': require('@/assets/img/daoqiong/FP3622S.jpg'),
          'infoList': [
            'MPN: FP3622S',
            'Gasket Included: Y',
            'Inlet Count: 1',
            'Inlet Type: Strainer',
            'Maximum Free Flow Rate (gph): 60',
            'Maximum Pressure Rate (psi): 90',
            'Minimum Free Flow Rate (gph): 50',
            'Minimum Pressure Rate (psi): 80',
            'Outlet Count: 1',
            'Outlet Size: 3/8',
            'Outlet Type: Threaded',
            'Package Contents: Pump & Kit',
            'Warranty: Two Years Warranty'
          ]

        }
      ]
    };
  }
};
</script>

<style scoped>

</style>
